<template>
	<view class="container">
		<view style="height: 20rpx"></view>
		<view @tap="toPage('list')" class="item flex-row add">
			<view class="icon flex-column">
				<text class="iconfont icon-user-add"></text>
			</view>
			<view class="title">新的好友</view>
		</view>
		<view @tap="toPage('group/index')" class="item flex-row group">
			<view class="icon flex-column">
				<text class="iconfont icon-group"></text>
			</view>
			<view class="title">我的群聊</view>
		</view>
		<view @tap="toPage('black')" class="item flex-row black">
			<view class="icon flex-column">
				<text class="iconfont icon-black-list"></text>
			</view>
			<view class="title">黑名单</view>
		</view>
		<view class="divider flex-row">
			<view class="title flex-column">我的好友</view>
		</view>
		<view @tap="toPage('detail?source=list&userId='+item.userId)" class="item flex-row" v-for="item in list" :key="item.id">
			<xbc-avatar :src="item.avatar" size="40px" />
			<view class="title">{{ item.name }}</view>
		</view>
		<view style="height: 20rpx"></view>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
import XBCIM from 'xbcim'
export default{
	data(){
		return {
			list: [],
			status: 'more',
			isComplete: false,
			state: {
				page: 1
			}
		}
	},
	onLoad(){
		this.getList()
	},
	onReachBottom(){
		if(this.isComplete) return
		this.state.page++
		getList()
	},
	methods: {
		toPage(path) {
			uni.navigateTo({
				url: `/pages/contact/${path}`
			})
		},
		async getList() {
			const res = await XBCIM.getFriendList(this.state)
			
			if(this.state.page > 1){
				this.list.push(...res?.list)
			}else{
				this.list = res?.list || []
			}
			
			this.isComplete = res?.isComplete
			this.status = this.isComplete ? 'no-more' : 'more'
		}
	}
}
</script>

<style lang="scss" scoped>
.divider {
	height: 110rpx;
	padding: 0 30rpx;
	position: relative;

	&::after {
		content: '';
		height: 1px;
		background-color: #f5f5f5;
		position: absolute;
		bottom: 50%;
		left: 0;
		right: 0;
		z-index: 0;
	}

	.title {
		height: 100%;
		padding: 0 4rpx;
		font-size: 32rpx;
		background-color: #fff;
		position: absolute;
		z-index: 1;
		left: 30rpx;
		top: 0;
	}
}

.item {
	padding: 20rpx 30rpx;

	.icon {
		border-radius: 8rpx;
		@include fullsize(80rpx);

		.iconfont {
			color: #fff;
			font-size: 44rpx;
		}
	}

	.title {
		flex: 1;
		color: #333;
		font-size: 30rpx;
		margin-left: 30rpx;
		@include line-height(80rpx);
	}

	&.add .icon {
		background-color: #ffa548;
	}

	&.group .icon {
		background-color: #4DA5F0;
	}

	&.black .icon {
		background-color: #9E9E9E;
	}
}
</style>